<template>
  <section class="Employees-Detail">
    <div class="basic">
      <quick-panel title="基本信息">
        <div class="info">
          <h1>
            {{ detail.name }}
            <gender-icon :value="+detail.gender" />
          </h1>
          <h2>
            <span>{{ detail.position }}</span>
          </h2>
          <quick-article title="备注">
            <p class="remark">{{ detail.remark }}</p>
          </quick-article>
        </div>
      </quick-panel>
      <quick-panel title="绩效目标">
        <div class="total">
          <div class="card">
            <span class="money">10</span>
            <span class="label">已完成绩效</span>
          </div>
          <div class="card">
            <span class="money">20</span>
            <!-- <span class="action-bar">
              <i class="iconfont icon-xiugai" @click="showInvoiceDialog"></i>
            </span> -->
            <span class="label">未完成绩效</span>
          </div>
        </div>
      </quick-panel>
    </div>

    <quick-panel title="项目列表">
      <!-- <quick-action-bar slot="subtitle">
        <quick-icon-button
          icon="icon-lound-speaker"
          tooltip="汇报"
          @click="report"
        />
      </quick-action-bar> -->
      <quick-card-list :items="items">
        <template slot-scope="scope">
          <employees-detail-card :item="scope.item" :noAction="false">
          </employees-detail-card>
        </template>
      </quick-card-list>
    </quick-panel>
    <employees-report ref="reportDialog" />
  </section>
</template>

<script>
import _api from "@/common/api/employee";
import _project from "@/common/api/project";
import GenderIcon from "@/views/Common/GenderIcon";
import EmployeesDetailCard from "./EmployeesDetailCard.vue";
import EmployeesReport from "./EmployeesReport.vue";
export default {
  components: {
    GenderIcon,
    EmployeesReport,
    EmployeesDetailCard,
  },
  data() {
    return {
      id: "",
      detail: {},
      items: [],
    };
  },
  methods: {
    async getEmployees() {
      try {
        const search = {
          id: +this.id,
        };
        const result = await _api.getListAsync(search);
        this.detail = result.data[0];
      } catch (error) {}
    },

    async getProjects() {
      try {
        const search = {
          leader: +this.id,
        };
        const result = await _project.getListAsync(search);
        this.items = result.data;
      } catch (error) {}
    },

    report() {
      this.$refs.reportDialog.showDialog();
    },

    showInvoiceDialog() {},
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getEmployees();
    this.getProjects();
  },
};
</script>

<style lang="scss" scoped>
.Employees-Detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;

  .basic {
    display: flex;

    > :nth-child(2) {
      margin-left: 80px;
    }

    .info {
      display: flex;
      flex-direction: column;
      width: 300px;

      h1 {
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 2;
        display: flex;
      }

      .rate {
        display: inline-block;
        line-height: 2;

        cursor: pointer;
      }

      h2 {
        line-height: 2;

        span {
          margin: 2px;
          padding: 0 3px;
          border: 1px solid #409eff;
          border-radius: 3px;
          color: #409eff;
        }
      }

      p {
        line-height: 2;
        margin-right: 10px;
      }

      .remark {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .parent {
        display: flex;
        justify-content: space-between;
      }
    }

    .total {
      flex: 1;
      display: flex;

      .card {
        min-width: 200px;
        height: 150px;
        box-shadow: 0 0 12px #f4f4f4;
        margin: 5px;
        padding: 0px 30px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .row {
          display: flex;
          align-items: flex-end;
        }

        .label {
          color: #999;
          font-size: 2rem;
          margin-top: 20px;
        }

        .money {
          font-size: 4rem;
          color: coral;

          &::after {
            content: ".00";
            font-size: 2rem;
          }
        }
      }
    }
  }

  .action-bar {
    margin-left: 5px;

    i {
      font-size: 1.6rem;
      color: #999;
      font-weight: 400;
      cursor: pointer;
      padding-right: 5px;

      &:hover {
        color: #409eff;
        font-size: 1.8rem;
      }
    }
  }

  .nav {
    display: flex;
    align-items: center;
    height: 30px;
    // background: #f4f4f4;

    .nav-item {
      margin: 0 5px;
      font-size: 1.3rem;
      color: #666;
      transition: 0.5s;
      font-weight: 400;

      &:hover {
        // margin-left: 10px;
        font-size: 2rem;
        color: coral;
        cursor: pointer;
      }
    }
  }
}
</style>